<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>通知管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--查询参数的表单-->
<form class="layui-form layui-form-pane layui-margin-3">

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">通知状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value=""></option>
                    <option value="1">未发布</option>
                    <option value="2">已发布</option>
                    <option value="3">已销毁</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">通知类型</label>
            <div class="layui-input-block">
                <select name="type" id="type">
                    <option value=""></option>
                    <option value="1">普通通知</option>
                    <option value="2">维护通知</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">发布用户</label>
            <div class="layui-input-block">
                <input type="number" name="sender" id="sender" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="toDo">搜索通知</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--解析特殊值的含义-->
<script type="text/html" id="table-type">
    {{# if(d.status === 1) { }}
    <span class="layui-badge layui-bg-blue">未发布</span>
    {{# } else if(d.status == 2) { }}
    <span class="layui-badge layui-bg-green">已发布</span>
    {{# } else if(d.status == 3) { }}
    <span class="layui-badge">已销毁</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-cyan">未知</span>
    {{# } }}
</script>

<script type="text/html" id="table-type2">
    {{# if(d.type === 1) { }}
    <span class="layui-badge layui-bg-orange">普通通知</span>
    {{# } else if(d.type == 2) { }}
    <span class="layui-badge layui-bg-cyan">维护通知</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-cyan">未知通知</span>
    {{# } }}
</script>

<script type="text/html" id="table-type3">
    {{# if(d.status === 1) { }}
    <button class="layui-btn layui-btn-xs layui-bg-blue" lay-event="toSend">发布</button>
    {{# } else if(d.status == 2) { }}
    <button class="layui-btn layui-btn-xs layui-bg-green" lay-event="toStop">撤销</button>
    {{# } else if(d.status == 3) { }}
    <button class="layui-btn layui-btn-xs layui-bg-red" lay-event="toBack">恢复</button>
    {{# } else { }}
    <span class="layui-badge layui-bg-cyan">未知</span>
    {{# } }}
</script>

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--表格内容右端操作按钮-->
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="send">发布</a>
    </div>
</script>

<!--表格右下角分页栏按钮-->
<script type="text/html" id="my-page-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-purple layui-btn-xs" lay-event="作者：张宏业">😀 操作提示：点击任意行即可查看当前通知的详细信息！</button>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;

        // 搜索按钮事件
        form.on('submit(toDo)', function (data) {
            let field = data.field; // 获取表单字段值

            table.reload('test', {  // 表格数据重载
                where: {
                    'status': field.status,
                    'type': field.type,
                    'sender': field.sender
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/getAllNoticeData',
            page: true,
            limit: 20,
            limits: [20, 50, 100],
            pagebar: '#my-page-bar', // 分页栏模板
            cols: [
                [
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'title', title: '通知标题', align: 'center'},
                    {field: 'status', title: '通知状态', align: 'center', templet: '#table-type'},
                    {field: 'sender', title: '发布用户', align: 'center', templet: '<div><span class="layui-badge layui-bg-gray">{{= d.sender }}</span></div>'},
                    {field: 'when', title: '发布时间', align: 'center'},
                    {field: 'type', title: '通知类型', align: 'center', templet: '#table-type2'},
                    {field: 'receiver', title: '接收用户类型', align: 'center'},
                    {fixed: 'right', title: '相关操作', width: 120, templet: '#table-type3', align: 'center'}
                ]
            ],
            error: function (res, msg) {
                console.log(res, msg);
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            let data = obj.data; // 获得当前行数据

            if (obj.event === 'toSend') {
                layer.confirm('确定发布这条通知嘛？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: '/setNoticeStatus/' + data.id + '/2',
                        type: 'GET',
                        success: function (res) {
                            if (res.code) {
                                layer.msg('发布成功！', {icon: 1});
                                table.reload(obj.config.id);
                            } else {
                                layer.msg('发布失败！', {icon: 2});
                            }
                        },
                        error: function () {
                            layer.msg('Ajax请求异常！', {icon: 0});
                        }
                    });
                }, function () {
                    layer.msg('已取消发布！');
                });
            } else if (obj.event === 'toStop') {
                layer.confirm('确定撤销这条通知嘛？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: '/setNoticeStatus/' + data.id + '/3',
                        type: 'GET',
                        success: function (res) {
                            if (res.code) {
                                layer.msg('撤销成功！', {icon: 1});
                                table.reload(obj.config.id);
                            } else {
                                layer.msg('撤销失败！', {icon: 2});
                            }
                        },
                        error: function () {
                            layer.msg('Ajax请求异常！', {icon: 0});
                        }
                    });
                }, function () {
                    layer.msg('已取消撤销！');
                });
            } else if (obj.event === 'toBack') {
                layer.confirm('确定恢复这条通知嘛？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: '/setNoticeStatus/' + data.id + '/1',
                        type: 'GET',
                        success: function (res) {
                            if (res.code) {
                                layer.msg('恢复成功！', {icon: 1});
                                table.reload(obj.config.id);
                            } else {
                                layer.msg('恢复失败！', {icon: 2});
                            }
                        },
                        error: function () {
                            layer.msg('Ajax请求异常！', {icon: 0});
                        }
                    });
                }, function () {
                    layer.msg('已取消恢复！');
                });
            }
        });

        // 底部分页栏事件
        table.on('pagebar(test)', function (obj) {
            var eventValue = obj.event; // 获得按钮 lay-event 值
            layer.msg(eventValue);
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            let data = obj.data; // 获得当前行数据
            layer.open({
                type: 2,
                title: '',
                area: ['800px', '500px'],
                scrollbar: false,
                skin: 'layui-layer-win10',
                content: '/toNoticeDetail/' + data.id
            });
        });
    });
</script>
</body>
</html>